<template>
  <div class="yhSelectTree">
        <vxe-pulldown ref="yhPullDown" destroy-on-close
                      @hide-panel="hidePanel"
                      class="custom_pull_down">
          <template #default>
            <div class="input_outer_warp" :class=" isShowPanel ? 'el-focus-color' : ''" @click="togglePanel">
              <span class="placeholder_class" v-if="checkedNodes.length === 0">{{ props.placeholder }}</span>
              <div v-else class="show_tags">
                <div class="tags_info">
                  <span class="tags_text">{{ checkedNodes[0].name }}</span>
                  <span class="tags_icon">
                    <i class="el-icon-circle-close" @click.stop="closeTag(checkedNodes[0])"></i>
                  </span>
                </div>
                <div class="tags_more" v-show="checkedNodes.length > 1">+{{ checkedNodes.length - 1 }}</div>
              </div>
              <i class="toggle_Icon"
                 :class="isShowPanel ? 'iconfont i-arrow-up-' : 'iconfont i-arrow-down-'"
                 @click.stop="togglePanel"
              ></i>
            </div>
          </template>
          <template #dropdown>
            <div class="yhDropdown">
<!--              <el-tree-->
<!--                  class="elTree"-->
<!--                  ref="elTree"-->
<!--                  show-checkbox-->
<!--                  node-key="id"-->
<!--                  :props="defaultProps"-->
<!--                  :default-checked-keys="checkedKeys"-->
<!--                  :data="props.treeData"-->
<!--                  @check-change="checkChange">-->
<!--                <span slot-scope="{ node, data }">-->
<!--                  <span class="info_title" :title="node.label">{{ node.label }}</span>-->
<!--                </span>-->
<!--              </el-tree>-->
            </div>
          </template>
        </vxe-pulldown>
  </div>
</template>

<script setup>

import {ref, watch} from "vue";

const props = defineProps({
  placeholder: {
    type: String,
    default: function () {
      return '请选择'
    }
  },
  modelValue: {
    type: Array,
    default: function () {
      return []
    }
  },
  treeData: {
    type: Array,
    default: function () {
      return []
    }
  }
})
let yhPullDown = ref(null)
let elTree = ref(null)
let checkedNodes = ref([])
let isShowPanel = ref(true)
let checkedKeys = ref([])
let defaultProps = ref({
  children: 'children',
  label: 'name'
})

watch(() => props.modelValue, (v) => {
  checkedKeys.value = v
  if (!v.length) checkedNodes.value = []
}, {deep: true})

const hidePanel = () => {
  isShowPanel.value = false
}
const togglePanel = () => {
  isShowPanel.value = !isShowPanel.value
  yhPullDown.value.togglePanel()
}
const closeTag = () => {
  checkedNodes.value = checkedNodes.value.filter(item => item.id !== row.id)
  checkedKeys.value = checkedKeys.value.filter(item => item !== row.id)
  if (row.children.length) {
    row.children.map(function (item) {
      closeTag(item)
    })
  }
  handleUpdateTreeNodes()
}
const checkChange = () => {
  checkedNodes.value = elTree.value.getCheckedNodes()
  checkedKeys.value = elTree.value.getCheckedKeys()
}
const handleUpdateTreeNodes = () => {
  if (elTree.value) {
    elTree.value.setCheckedKeys(checkedKeys.value)
    elTree.value.setCheckedNodes(checkedNodes.value)
  }
}

</script>

<style scoped lang="less">
.yhSelectTree {
  width: 100%;
}

.custom_pull_down {
  width: 100%;
}

.input_outer_warp {
  width: 100%;
  height: 32px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-focus-color {
  border-color: #409eff;
}

.show_tags {
  width: 94%;
  height: 90%;
  overflow: hidden;
  padding: 2px;
  display: flex;
  align-items: center;
}

.tags_info {
  max-width: 60%;
  height: 100%;
  border: 1px solid #e9e9eb;
  background-color: #f4f4f5;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tags_text {
  width: 90%;
  padding: 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tags_icon {
  margin-right: 4px;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.tags_more {
  width: 35px;
  height: 100%;
  margin-left: 5%;
  border: 1px solid #e9e9eb;
  background-color: #f4f4f5;
  border-radius: 4px;
  padding: 1px 2px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.toggle_Icon {
  color: #DCDFE6;
  cursor: pointer;
}

.yhDropdown {
  width: 100%;
  min-height: 150px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  margin: 3px 0;
}
</style>